<template>
    <Drawer
        :title="title"
        v-model="show"
        width="420"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
        <Form ref="validForm" :model="formData" :rules="ruleValidate">
            <FormItem label="一级分类名称" label-position="top" v-if="row.pid != null">
            <Input placeholder="请输入一级分类名称" :modelValue="formData.parentName" readonly/>
            </FormItem>

            <FormItem label="资源分类名" label-position="top" prop="name" :error="error.name">
            <Input v-model="formData.name" placeholder="请输入资源分类名"/>
            </FormItem>

            <FormItem label="状态" label-position="top" :error="error.state">
            <Switch size="large" v-model="formData.state">
                <template #open>
                <span>启用</span>
                </template>
                <template #close>
                <span>禁用</span>
                </template>
            </Switch>
            </FormItem>
        </Form>

        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="show = false">关闭</Button>
            <Button type="primary" @click="handleForm">保存</Button>
        </div>
    </Drawer>
</template>

<script setup>
import {ref, computed, reactive} from 'vue' 
import Tips from '@/message'

const {modelValue, row, title} = defineProps({
    modelValue: {
        type: Boolean, required: true ,
    },
    row: {
        type: Object, required: true ,
    },
    title: String,
})

const emits = defineEmits(["update:model-value"]) ;
// 控制抽屉， 定义一个计算属性
const show = computed({
    get() {
        return modelValue ;
    },
    set(val) {
        emits('update:model-value', val);
    }
});

// 定义表单数据
const formData = ref(row) ; 

const ruleValidate = reactive({
    name: [
        {required: true, message: "资源分类名称不允许为空", trigger: 'blur'} ,
        {type: "string", max:50, message: "资源分类名称过长", trigger: 'blur'} ,
    ]
})

const validForm = ref(null) ; // 定义一个变量，指向 form表单组件

const error = ref({}) // 存储 后端服务器校验失败的错误信息 

function handleForm() {
    error.value = {} ;
    validForm.value.validate(valid => {
        if (valid) {
            if (row.id == null) {
                handleSave();
            }else{
                handleUpdate();
            }
        }
    })
}

// 保存数据
function handleSave() {
    Tips.success("保存成功");
    show.value = false ;
}

// 修改数据
function handleUpdate() {
    Tips.success("修改成功"); 
    show.value = false ;
}

</script>

<style scoped>
.icon {
vertical-align: middle;
margin: 0 3px;;
}

.demo-drawer-footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
background: #fff;
}
</style>